<template>
	<div class="subpage buy-order-detail-container">
		<div class="buy-detail-box">
			<div class="project-item-info">
				<div class="project-img">
					<img :src="item.smallPic" alt="">
				</div>
				<ul class="project-item-detail">
					<li>
						<p class="project-name">{{item.productName}}({{item.farmName}})</p>
					</li>
					<li>
						<span>养殖地：{{item.cattleAddress}}</span>
						<span>牧场：{{item.farmName}}</span>
					</li>
					<li>
						<span>重量：{{item.productWeight}}{{item.productWeightUnit}}</span>
						<span>单价：{{item.salesPrice}}元/kg</span>
					</li>
					<li>
						<p class="project-price">
							<span>{{item.totalPrice}}</span>{{item.productPriceUnit}}
						</p>
						<p>
							 交货期：<span class="color-primary">{{item.deliveryTime}}</span>个月
						</p>
					</li>
				</ul>
			</div>

			<div class="buy-goods-box">
				<ul class="buy-goods-top">
					<li>
						<p>我要求购</p>
						<p>{{item.totalNum}}头</p>
					</li>
					<li>
						<p>总重量</p>
						<p>{{item.totalNum * item.productWeight}}kg</p>
					</li>
					<li>
						<p>总金额</p>
						<p class="color-primary">{{item.totalNum * item.totalPrice}}元</p>
					</li>
					<li>
						<p>求购时间</p>
						<p>{{item.wantTime}}</p>
					</li>
				</ul>
			</div>

			<div class="buy-agreement-box">
				<div class="chenboxaa" @click="isCheckedClick" v-if="isChecked">
					<van-icon name="checked" color="#31BC8D" size="22px" tag="i" />
				</div>
				<div class="chenboxaa" @click="isCheckedClick" v-else>
					<van-icon name="circle" color="#999" size="22px" tag="i" />
				</div>
				<p>阅读且同意<span class="color-primary" @click="to">《友牧农场服务协议》</span></p>
			</div>
		</div>
		<div class="footer">
			<div class="btn-box" @click="shelvesAction">
				取消求购
			</div>
		</div>

		<div class="cancel-resale" v-show="resaleCancelOverlay">
			<div class="resale-head">温馨提示</div>
			<p>是否要取消求购</p>
			<div class="cancel-btm">
				<span @click="resaleConfim">确定</span>
				<span @click="resaleCancel">取消</span>
			</div>
		</div>
		<van-overlay :show="resaleCancelOverlay" />
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		overlay
	} from 'vant';
	Vue.use(overlay)
	export default {
		data() {
			return {
				item: {},
				isChecked: true,
				resaleCancelOverlay: false,

			}
		},
		created() {
			this.getTab1Data() //  //   求购中 详情 
		},
		methods: {
			to() {
				this.$router.push({
					name: 'supplyAgreement',
					query: {
						id: -1
					}
				})
			},
			shelvesAction() {
				if (!this.isChecked) {
					this.$tool.toast('请先阅读且同意《友牧农场服务协议》')
					return
				}
				this.resaleCancelOverlay = true;
			},
			// 取消求购  POST /api/supply/cancel/{want_cattle_id}
			resaleConfim() {
				this.$api.post('/api/supply/cancel/' + this.$route.params.id)
					.then((res) => {
						console.log(res)
						this.resaleCancelOverlay = false;
//						this.$router.back()
						this.$router.replace({
							path: '/my/buyOrder'
						})
					})
			},
			resaleCancel() {
				this.resaleCancelOverlay = false;
			},
			isCheckedClick() {
				this.isChecked = !this.isChecked;
			},
			//   求购中 详情 
			getTab1Data() {
				this.$api.get('/api/supply/getSupplyOrder/' + this.$route.params.id)
					.then(({data}) => {
						this.item = data;
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../tabdetailScss.scss';

	.buy-agreement-box {
		width: 100%;
		height: 46px;
		padding: 0 !important;
		padding-left: 16px !important;
	}
</style>
